import * as React from 'react';
//建立页面数据和store 的关联
import { connect } from 'react-redux'
import { Post, Get, Patch, Put } from '../../utils/utilHttp'
import utils from '../../utils/utils'
import { Link, RouteComponentProps } from 'react-router-dom';
import { Button, WhiteSpace, WingBlank,Pagination,Icon } from 'antd-mobile';
import '../../utils/common.scss'
import './home.scss'

import Top from '../../components/top/top'

import  img001 from './img/001.jpg'

interface IState {
  navType:string,
  textList:any[],
  pageNumber:number,
  pageSize:number
}
interface IProps extends RouteComponentProps {
}
class Home extends React.Component<IProps, IState> {
  state = {
    navType:'',//博客的主题类型
    textList:[],//文章列表数据
    pageNumber:1,
    pageSize:20
  }
  componentDidMount(){
    this.getList();
  }
  componentDidUpdate(){
    console.log('数据变化,就会触发这');
  }
  //选择不同的主题
  navClick=(navIndex:number)=>{
    let urlName=['','good','share','ask','job','dev'];
    // this.props.history.push(`/home/${urlName[navIndex]}`)
    if(this.state.navType!=urlName[navIndex]){
      this.setState({
        navType:urlName[navIndex],
        pageNumber:1
      },()=>{
        this.getList()
      })
    }
  }
  //获取列表数据
  getList=()=>{
    let {pageNumber,pageSize,navType} =this.state;
    Get('/api/v1/topics',{page:pageNumber,limit:pageSize,tab:navType}).then((res)=>{
      if(res.success){
        let resData=res.data;
        for(let ii of resData){
          ii.last_reply_at = utils.formatDate1(ii.last_reply_at)
        }
        this.setState({
          textList:resData
        })
      }
    },(err)=>{
      console.log(err);
    })
  }
  //页面跳转
  changePage=(pageNumber?:number)=>{
    if(pageNumber){
      this.setState({
        pageNumber
      },()=>{
        this.getList();
      })
    }
  }
  render() {
    let {textList,pageNumber} =this.state;
    return (
      <div className='Home'>
        <Top history={this.props.history}></Top>
        <HomeNav navClick={this.navClick}></HomeNav>
        <HomeList textList={textList} pageNumberUp={pageNumber}  pageChange={this.changePage} history={this.props.history}></HomeList>
      </div>
    )
  }
}

interface Nav {
  navClick:any
}
class HomeNav extends React.Component<Nav,{}> {
  constructor(props:Nav){
    super(props);
  }
  state={
    navList:['全部','精华','分享','问答','招聘','客户端测试'],//列表
    navIndex:0,//选中下标
  }
  navOn=(navIndex:number)=>{
    this.setState({navIndex});
    this.props.navClick(navIndex)
  }
  render(){
    let {navList,navIndex}=this.state;
    return (
      <div className='home_nav'>
        {
          navList.map((item,index)=>{
            return(<span className={`font_24 ${navIndex==index?'active':''}`} key={index} onClick={()=>{this.navOn(index)}}>{item}</span>)
          })
        }
      </div>
    )
  }
}
interface ListState {
  textList:any[],
  pageNumber:number
}
interface ListProps {
  textList:any[],
  pageChange:any,
  pageNumberUp:number,
  history:any
}
class HomeList extends React.PureComponent<ListProps,ListState> {
  state:ListState={
    textList:[],//列表数据
    pageNumber:1,//页数
  }
  //从props中获取数据 映射到 state 
  static getDerivedStateFromProps(newProps:ListProps, oldState:ListState) {
    //如果 props 传入的内容不需要影响到你的 state ，那么就需要返回一个 null
    return null;
  }
  //跳转详情
  goDetail=(id:string)=>{
    this.props.history.push(`/topic/${id}`)
  }
  up=()=>{
    let pageNumber=this.state.pageNumber-1;
    let _pageNumber=pageNumber||1;
    console.log(_pageNumber);
    this.setState({
      pageNumber:_pageNumber
    },()=>{
      this.props.pageChange(_pageNumber);
    })
  }
  down=()=>{
    let pageNumber=this.state.pageNumber+1;
    let _pageNumber=pageNumber||1;
    console.log(_pageNumber);
    this.setState({
      pageNumber:_pageNumber
    },()=>{
      this.props.pageChange(_pageNumber);
    })
  }
  render(){
    let {textList,pageNumberUp}=this.props;
    let {pageNumber} =this.state;
    return (
      <div className='home_list'>
        <ul>
          {
            textList.map((item:any,index:number)=>{
              return(
                <li className='list_li' key={index} onClick={()=>{this.goDetail(item.id)}}>
                  {item.author.avatar_url?(<img src={item.author.avatar_url}/>):(<img src={img001}/>)}
                  <div className='li_text'>
                    <div className='li_title'>{item.title}</div>
                    {item.top?(<span className='top'>置顶</span>):''}
                    <span><span className='color_red'>{item.reply_count}</span>&nbsp;回复</span>
                    <span><span className='color_red'>{item.visit_count}</span>&nbsp;点赞</span>
                  </div>
                  <span>{item.last_reply_at}</span>
                </li>
              )
            })
          }
        </ul>
        <div className='home_step'>
          <Button type="primary" inline  size='small' onClick={()=>{this.up()}}>上一页</Button>
          <i>{pageNumberUp}/99</i>
          <Button type="primary" inline  size='small' onClick={()=>{this.down()}}>下一页</Button>
        </div>
        <div className='clear clear30'></div>
      </div>
    )
  }
}


//将store里面的数据映射到props 这个数据
//就是取store的数据 然后操作 赋值给页面的变量
//将页面数据和全局数据绑定
const mapState = ({ store }: any) => {
  return ({
    isLogin: store.isLogin,
    userInfo:store.userInfo
  })
}

const mapDispatch = ({ store }: any) => ({
  // changeLoaderType() {
  //   store.changeLoaderType(true)
  // }
  setPlayListAct(data:any){
    store.setPlayListAct(data)
  },
  setMp3ListAct(data:any){
    store.setMp3ListFun(data)
  },
})
//返回了 connect 其实是一个容器组件
export default connect(mapState, mapDispatch)(Home); 
